@model System.String
@using Telerik.Web.Mvc.UI

<img id="img_@(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))" src="@(ViewData.TemplateInfo.FormattedModelValue.ToString())" style=" max-width:280px; max-height:40px;" alt="@(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))" />

@Html.Hidden("", ViewData.TemplateInfo.FormattedModelValue.ToString(), new { @class = "text-box single-line file-upload attachments_" + ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty) })

@(Html.Telerik().Upload()
        .Name("attachments_" + ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
        .Multiple(false)
        .Async(async => async
            .Save("Save", "Upload")
            .Remove("Remove", "Upload")
            .AutoUpload(true)
        )
        .ClientEvents(events => events.OnSuccess("OnSuccess_" + ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)).OnLoad("OnLoad_" + ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)))
        .HtmlAttributes(new { @class = "file-upload-box" })
)

@{ Html.Telerik().ScriptRegistrar()
    .OnDocumentReady(@<text>

    @if(string.IsNullOrEmpty(ViewData.TemplateInfo.FormattedModelValue.ToString()))
    {
        <text>
        $('#img_@(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))').addClass("dn");
        </text>
    }

</text>); }

<script type="text/javascript">


    function OnSuccess_@(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))(e) {
        if (e.operation == "upload") {
            $(".attachments_@(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))").attr("value", "/Content/UserFiles/Upload/" + getFileInfo(e));
            $('#img_@(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))').attr("src", "/Content/UserFiles/Upload/" + getFileInfo(e));
            $('#img_@(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))').removeClass("dn");
        }
        else if (e.operation == "remove") {
            $(".attachments_@(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))").attr("value", "");
            $('#img_@(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))').attr("src", "");
            $('#img_@(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))').addClass("dn");
        }
        
    }

    var PARAM_NAME = "attachments";
    function OnLoad_@(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))(e) {
        var uploadElement = $("input", this).attr("name", PARAM_NAME);
        setTimeout(function () {
            uploadElement.data("tUpload").name = PARAM_NAME;
        }, 0);
    }

    function getFileInfo(e) {
        return $.map(e.files, function (file) {
            var info = file.name;
            return info;
        }).join(", ");
    }
</script>

